<template>
  <div class="padding" style="margin-left:-16px;width:101.51%">
    <el-card>
      <div slot="header" class="clearfix relative">
        <span class="title-icon">{{ title }}</span>
        <el-button
          type="success"
          size="mini"
          class="header-save-btn"
          @click="changeContainerInfo"
        >
          {{ isChangeContainerInfo ? "保存" : "编辑" }}
        </el-button>
      </div>

      <el-table :data="tableData" border size="mini" style="width:99%">
        <el-table-column prop="boxType" label="柜型">
          <template slot-scope="scope">
            <el-select
              v-if="isChangeContainerInfo"
              v-model="scope.row['boxType']"
              placeholder="请选择柜型"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in cabinetOptions"
                :key="k"
                :label="cabinetOptions[v]"
                :value="k"
              ></el-option>
            </el-select>

            <span v-else>{{ scope.row["boxType"] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="contairNumber" label="柜号">
          <template slot-scope="scope">
            <el-input
              v-if="isChangeContainerInfo"
              v-model="scope.row['contairNumber']"
              clearable
              size="mini"
            />
            <span v-else>{{ scope.row["contairNumber"] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sealNumber" label="封条号">
          <template slot-scope="scope">
            <el-input
              v-if="isChangeContainerInfo"
              v-model="scope.row['sealNumber']"
              clearable
              size="mini"
            />
            <span v-else>{{ scope.row["sealNumber"] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="boxCount" label="件数">
          <template slot-scope="scope">
            <el-input
              v-if="isChangeContainerInfo"
              v-model="scope.row['boxCount']"
              clearable
              size="mini"
            />
            <span v-else>{{ scope.row["boxCount"] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="packageType" label="包装类型">
          <template slot-scope="scope">
            <el-select
              v-if="isChangeContainerInfo"
              v-model="scope.row['packageType']"
              placeholder="请选择包装类型"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in packageTypeOptions"
                :key="k"
                :label="packageTypeOptions[v]"
                :value="v"
              ></el-option>
            </el-select>

            <span v-else>{{ scope.row["packageType"] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="grossWeight" label="毛重">
          <template slot-scope="scope">
            <el-input
              v-if="isChangeContainerInfo"
              v-model="scope.row['grossWeight']"
              clearable
              size="mini"
            />
            <span v-else>{{ scope.row["grossWeight"] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="grossVolume" label="体积">
          <template slot-scope="scope">
            <el-input
              v-if="isChangeContainerInfo"
              v-model="scope.row['grossVolume']"
              clearable
              size="mini"
            />
            <span v-else>{{ scope.row["grossVolume"] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="isChangeContainerInfo" width="70">
          <template slot-scope="scope">
            <i
              class="el-icon-circle-plus-outline  text-bold text-green pointer"
              @click="addRow(scope)"
            ></i>
            <i
              class="el-icon-remove-outline margin-left-sm text-bold text-red pointer"
              @click="removeRow(scope)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

export default {
  props: {
    waybillId: {
      type: Number
    },
    indexSort: {
      type: Number
    }
  },
  data() {
    return {
      title: "货物信息",
      isChangeContainerInfo: false,
      form: {},
      //包装类型下拉
      packageTypeOptions: {},
      //柜型下拉
      cabinetOptions: {},
      tableData: []
    };
  },
  mounted() {
    if (this.waybillId && this.waybillId > 1) {
      this.title = "分单" + this.indexSort + "货物信息";
    }
    this.initContainData();
  },
  methods: {
    initContainData() {
      var param = {};
      if (this.waybillId && this.waybillId > 1) {
        param["waybillId"] = this.waybillId;
      } else {
        param["waybillId"] = this.$route.query.waybillId;
      }
      ajax("initContainData", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error(res.message || "获取数据失败！");
          } else {
            if (null != res.data2) {
              this.form = res.data2;
            }
            if (null != res.data) {
              this.tableData = res.data;
            }
            if (null != res.data3) {
              this.cabinetOptions = res.data3["cabinetTypeMap"];
              this.packageTypeOptions = res.data3["packageType"];
            }
            console.log("柜子信息：", res.data);
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    changeContainerInfo() {
      if (this.isChangeContainerInfo) {
        if (this.checkTableData()) {
          this.isChangeContainerInfo = false;
          var param = this.form;
          param["containInfos"] = this.tableData;
          param["id"] = this.form.waybillId;
          ajax("changeContainRemark", param).then(
            res => {
              console.log(res);
              if (res.code != 200) {
                this.$message.error(res.message || "获取数据失败！");
              } else {
                console.log(res.data);
              }
            },
            error => {
              console.log(error);
            }
          );
        }
      } else {
        this.isChangeContainerInfo = true;
      }
    },
    checkTableData() {
      for (const i of this.tableData) {
        // if (!i.boxType) {
        //   this.$message.error("请填写柜型");
        //   return false;
        // }
        // if (!i.contairNumber) {
        //   this.$message.error("请填写柜号");
        //   return false;
        // }
        // const reg = /^(?:0\.[0-9]{1,2}[1-9]|(?!0)\d+(?:\.[0-9][1-9])?|[0-9]*.[1-9]|^[1-9][0-9]*.[1-9]|(?!0)\d+(?:\.[0-9]{1,2}[1-9])?)$/;
        // if (!reg.test(i.grossVolume)) {
        //   this.$message.error("体积请填写正实数");
        //   return false;
        // }
        // if (!reg.test(i.grossWeight)) {
        //   this.$message.error("毛重请填写正实数");
        //   return false;
        // }
        // const reg2 = /^-?\d+$/;
        // if (!reg2.test(i.boxCount)) {
        //   this.$message.error("件数请填写整数");
        //   return false;
        // }
      }
      return true;
    },
    addRow(row) {
      console.log(
        "%crow: ",
        "color: MidnightBlue; background: Aquamarine;",
        row
      );
      this.tableData.splice(row.$index + 1, 0, {
        boxType: "",
        contairNumber: "",
        sealNumber: "",
        boxCount: "",
        packageType: "",
        grossWeight: "",
        grossVolume: ""
      });
    },
    removeRow(row) {
      console.log(
        "%crow: ",
        "color: MidnightBlue; background: Aquamarine;",
        row.$index
      );
      if (this.tableData.length > 1) {
        this.tableData.splice(row.$index, 1);
      }
    }
  }
};
</script>

<style></style>
